<template>
  <el-container>
    <el-aside class="aside-style" width="200px">
      <div class="title clearfix">
        <div class="fl">待审核函数库</div>
      </div>
      <div class="input-style">
        <el-input
          v-model="search"
          placeholder="输入关键字搜索"
          suffix-icon="el-icon-search"
          size="small"
          @keyup.enter.native="searchKeyword"
        />
      </div>
      <ul class="library-ul">
        <li
          v-for="item in list"
          :key="item.libraryName"
          :class="{ active: item.isActive }"
          @click="clickLibrary(item)"
        >
          <p class="library-name text-ellipsis">{{ item.libraryName }}</p>
          <p class="library-desc text-ellipsis">{{ item.desc }}</p>
        </li>
      </ul>
    </el-aside>
    <el-main class="main-style">
      <div class="title clearfix">
        <span>{{ activeLibrary.libraryName }}</span>
        <div class="fr">
          <el-button type="success" size="mini" :disabled="disabledButton == true" @click="handleGranted()">审核通过</el-button>
          <el-button type="danger" size="mini" :disabled="disabledButton == true" @click="handleDenied()">审核不通过</el-button>
        </div>
      </div>

      <el-tabs v-model="editableTabsValue">
        <el-tab-pane label="函数列表" name="list">
          <m-table
            ref="my-table"
            :data="tableData"
            :total="total"
            :loading="tableLoading"
            @current-change="handleCurrentChange"
          >
            <el-table-column
              prop="functionName"
              label="函数名称"
              width="200"
            />
            <el-table-column
              prop="functionDesc"
              label="功能描述"
            />
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-row class="btn-style">
                  <el-button
                    type="text"
                    @click="handleEdit(scope.row)"
                  >
                    编辑
                  </el-button>
                </el-row>
              </template>
            </el-table-column>
          </m-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import {
  getFunctions
} from '@/api/userProjectLibrary';
import {
  getExamineFunctionLibrary,
  LibraryGranted,
  LibraryDenied
} from '@/api/userProjectExamine';
import {
  runFc
} from '@/api/userProject';
export default {
  data() {
    return {
      search: '',
      list: [],
      originList: [],
      editableTabsValue: 'list',
      tableData: [],
      tableLoading: false,
      total: 0,
      activeLibrary: {},
      disabledButton: false
    };
  },
  created() {
    this.$store.commit('examine/setIsExamine', true);
    this.getLibrary();
  },
  methods: {
    getLibrary() {
      this.search = '';
      getExamineFunctionLibrary().then((data) => {
        if (data.libraries && data.libraries.length > 0) {
          data.libraries[0].isActive = true;
          this.list = data.libraries;
          this.originList = data.libraries;
          this.activeLibrary = this.list[0];
          this.getFunctionByLibrary(this.list[0].libraryName);
        } else {
          this.disabledButton = true;
        }
      });
    },
    clickLibrary(item) {
      this.activeLibrary.isActive = false;
      item.isActive = true;
      this.activeLibrary = item;
      this.getFunctionByLibrary(this.activeLibrary.libraryName);
    },
    getFunctionByLibrary(libraryName) {
      this.tableLoading = true;
      getFunctions({ libraryName })
        .then((data) => {
          this.tableData = data.functions || [];
          this.total = data.functions?.length || 0;
        })
        .finally((_) => {
          this.tableLoading = false;
        });
    },
    searchKeyword() {
      this.list = this.originList.filter((item) => {
        return (
          item.libraryName.includes(this.search) ||
          item.desc.includes(this.search)
        );
      });
    },
    handleGranted() {
      LibraryGranted([this.activeLibrary.libraryName])
        .then(() => {
          this.$message.success('审核通过');
          this.tableData.forEach((func) => {
            const obj = {};
            obj.libName = this.activeLibrary.libraryName;
            obj.funcName = func.functionName;
            runFc('mathless-plugin', 'updateWikiConfig', JSON.stringify(obj));
          });
          this.removeCurrentLibrary();
        });
    },
    handleDenied() {
      LibraryDenied([this.activeLibrary.libraryName])
        .then(() => {
          this.$message.success('审核不通过');
          this.removeCurrentLibrary();
        });
    },
    removeCurrentLibrary() {
      for (let i = 0; i < this.list.length; ++i) {
        if (this.list[i].libraryName === this.activeLibrary.libraryName) {
          this.activeLibrary.isActive = false;
          this.list.splice(i, 1);
          if (this.list.length > 0) {
            this.activeLibrary = this.list[0];
            this.activeLibrary.isActive = true;
            this.getFunctionByLibrary(this.activeLibrary.libraryName);
          } else {
            this.activeLibrary = {};
            this.tableData = [];
            this.disabledButton = true;
          }
          break;
        }
      }
    },
    handleCurrentChange(num) {
    },
    handleEdit(item) {
      this.$router.push({
        name: 'MyFunction',
        params: {
          row: item
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.aside-style {
  height: calc(100vh - 100px);
  background: #fbfbfb;
  overflow: hidden;

  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #f7f7f7;

    i {
      font-size: 20px;
      line-height: 50px;
      cursor: pointer;
    }
  }

  .input-style {
    padding: 10px;
  }

  .library-ul {
    padding: 0 10px;
    height: calc(100% - 130px);
    overflow-y: auto;
    overflow-x: hidden;

    li {
      list-style: none;
      min-height: 50px;
      padding: 0 10px;
      border-bottom: 1px solid #e5e5e5;
      cursor: pointer;

      &.active {
        border: 1px solid #0070cc;
      }

      .library-name {
        color: #333;
      }

      .library-desc {
        font-size: 12px;
        color: #555;
      }
    }
  }
}

.main-style {
  height: calc(100vh - 100px);
  overflow: hidden;
  padding: 10px;

  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;

    &.none-border {
      border: none;
    }
  }

  .content {
    p {
      padding: 10px 30px;

      span {
        margin-right: 50px;
      }
    }
  }
}
</style>
